@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#goals-view
  position: absolute
  left: -15px
  top: -100px
  @include transition(0.5s ease-in-out)
  border-style: solid
  border-image: url(/images/level/goals_background.png) 15 20 51 15 fill stretch
  border-width: 8px 10px 25px 8px
  margin: -8px -10px -25px -8px
  padding: 19px 0px 2px 25px
  z-index: 3
  font-size: 14px
  min-width: 230px

  &.codecombat-junior
    font-size: 32px
    border-image: url(/images/level/goals_background_junior.png) 15 20 15 15 fill stretch
    border-width: 8px 10px 8px 8px
    margin: -8px -10px -8px -8px
    padding: 10px 0px 0px 25px
    min-width: auto

    .glyphicon
      top: 3px

  @media screen and (max-width: 1366px) and (min-aspect-ratio: 1/1)
    transform: scale(0.8)
    transform-origin: top left

  @media screen and (max-width: 800px) and (max-aspect-ratio: 1/1)
    transform: scale(0.8)
    transform-origin: top left

  @media screen and (max-width: 1280px) and (min-aspect-ratio: 1/1)
    transform: scale(0.7)

    &.codecombat-junior
      margin: 0
      font-size: 24px

  @media screen and (max-width: 640px) and (max-aspect-ratio: 1/1)
    transform: scale(0.7)

    &.codecombat-junior
      margin: 0
      font-size: 24px

  @media screen and (max-width: 1024px) and (min-aspect-ratio: 1/1)
    transform: scale(0.6)

    img.goal-icon
      width: 1em
      margin-top: -0.2em

    &.codecombat-junior
      font-size: 20px

  @media screen and (max-width: 900px) and (min-aspect-ratio: 1/1)
    transform: scale(0.5)

  @media screen and (max-width: 800px) and (min-aspect-ratio: 1/1)
    transform: scale(0.4)

  @media screen and (max-width: 600px) and (min-aspect-ratio: 1/1)
    transform: scale(0.3)

  @media screen and (max-width: 500px) and (min-aspect-ratio: 1/1)
    transform: scale(0.2)

  @media screen and (min-width: 1600px)
    &.brighter
      transform: scale(1.2)
      transform-origin: top left

  @media screen and (min-width: 1800px)
    &.brighter
      transform: scale(1.4)
    
#goals-view.collapsed i.collapsed, #goals-view.expanded i.expanded
  display: none

#goals-view.collapsed ul
  display: none

body[lang^='pt'], body[lang^='es'], body[lang='fr'], body[lang='hu'], body[lang='it'], body[lang='sr']
  #goals-view:not(.codecombat-junior)
    font-size: 12px

    &.brighter
      font-size: 16px
      font-size: 1.2vw
